<template>
	<view class="page_wrap">
		<custom-header title="我的消息" />
		<scroll-view
			:scroll-y="true" 
			scroll-with-animation
			:style="{height:'calc(100vh - 5rpx - '+statusBarHeight+'px)'}"
			class="scroll_content_wrap">
			<view
				class="no_data"
				v-if="!listData.length && listLoading != 'loading'">
					<view class="icon">
						<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nodata.png" mode=""></image>
					</view>
			</view>
				<view class="list_wrap"v-if="listData.length">
					<view 
						class="list" 
						v-for="(item,index) in listData" 
						:key="index"
						hover-class="custom_hover"
						:hover-stay-time="200"
						@click="handleDetail(item)">
							<view class="left">
								<image src="/static/my/msg_icon.png" mode=""></image>
							</view>
							<view class="right">
								<view class="title_time">
									<view class="title">
										{{ item.title }}
									</view>
									<view class="time">
										{{ item.time }}
									</view>
								</view>
								<view class="content">
									{{ item.content }}
								</view>
							</view>
					</view>
				</view>
				<view class="loading_wrap" v-if="listLoading == 'loading'">
					<up-loadmore
						:status="listLoading"
						iconSize="22"
						iconColor="#FF3316"
						loadingIcon='semicircle'
						loadingText=""
						/>
				</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import { computed, ref , onMounted} from 'vue';
	import { useStore } from 'vuex';
	const store = useStore();
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight;
	});
	
	// 获取列表数据
	const listLoading = ref('loadmore');
	const listData = ref([]);
	const loadGetListData = ()=>{
		listData.value = []
		listLoading.value = 'loading'
		setTimeout(()=>{
			listData.value = [
				{
					id:1,
					title:'完善个人资料',
					content:'您的账号资料尚未完善，完善个人资料可以获得更多服务请尽快完善！',
					createTime:'2025年6月20日'
				},
				{
					id:1,
					title:'完善个人资料1',
					content:'您的账号资料尚未完善，完善个人资料可以获得更多服务请尽快完善！',
					createTime:'2025年6月20日'
				},
				{
					id:1,
					title:'完善个人资料2',
					content:'您的账号资料尚未完善，完善个人资料可以获得更多服务请尽快完善！',
					createTime:'2025年6月20日'
				},
				{
					id:1,
					title:'完善个人资料3',
					content:'您的账号资料尚未完善，完善个人资料可以获得更多服务请尽快完善！',
					createTime:'2025年6月20日'
				},
				{
					id:1,
					title:'完善个人资料4',
					content:'您的账号资料尚未完善，完善个人资料可以获得更多服务请尽快完善！',
					createTime:'2025年6月20日'
				},
			]
			listLoading.value = 'loadmore'
		},1000);
	};
	// 查看详情
	const handleDetail = (item)=>{
		uni.navigateTo({
			url:'/pages/platformNoticeDetail/platformNoticeDetail?id='+item.id
		})
	}
	
	onMounted(()=>{
		loadGetListData()
	})
</script>

<style lang="scss">
	.page_wrap{
		min-height: 100vh;
		background-color: #fff;
	}
	.no_data{
		background: #fff;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx;
		height: calc(100% - 40rpx);
		.icon{
			width: 280rpx;
			height: 322rpx;
		}
	}
	.list_wrap{
		.list{
			display: flex;
			align-items: center;
			padding: 30rpx 25rpx;
			.left{
				width: 81rpx;
				height: 81rpx;
				line-height: 81rpx;
				text-align: center;
				border-radius: 100%;
				background: #F7F7F7;
				image{
					width: 32rpx;
					height: 25rpx;
				}
			}
			.right{
				flex: 1;
				padding-left: 25rpx;
				font-size: 24rpx;
				color: #AAAAAA;
				.title_time{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.title{
						font-size: 32rpx;
						color: #333333;
					}
				}
				.content{
					padding-top: 10rpx;
				}
			}
		}
	}
</style>
